import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

///店铺装修-图文导航
class DecorationImageTextNav extends StatefulWidget {
  ///图文导航信息
  final Map<String, dynamic> info;
  const DecorationImageTextNav({super.key, required this.info});

  @override
  State<StatefulWidget> createState() {
    return _DecorationImageTextNavState();
  }
}

class _DecorationImageTextNavState extends State<DecorationImageTextNav> {
  @override
  Widget build(BuildContext context) {
    return getBox();
  }

  ///获取容器
  Widget getBox() {
    // print('DecorationImageTextNav ==== ${widget.info['slide_setting']}');

    switch (widget.info['slide_setting']) {
      case '1': //横向滚动
        return Container(
          color: Tools.fromHex('#f4f4f4'),
          child: Container(
            margin: const EdgeInsets.only(top: 10, left: 10, right: 10, bottom: 0),
            padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
            decoration: const BoxDecoration(
              // color: Tools.fromHex(widget.info['background_color']),
              color: Colors.white,
              borderRadius: BorderRadius.all(Radius.circular(8)),
            ),
            child: SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: (widget.info['sub_entry'] as List).map((item) => imageTextItem(item)).toList(),
              ),
            ),
          ),
        );
      case '0':
      default: //固定
        return Container(
          color: Tools.fromHex(widget.info['background_color']),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: (widget.info['sub_entry'] as List).map((item) => imageTextItem(item)).toList(),
          ),
        );
    }
  }

  ///图文item
  Widget imageTextItem(Map<String, dynamic> item) {
    // print('imageTextItem ==== ${widget.info['show_method']}');
    switch (widget.info['show_method']) {
      case '2': //文字导航
        return BaseInteractive(
          childWidget: Container(
            width: getItemWidth(),
            height: 21.h,
            alignment: Alignment.center,
            child: Text(
              item['title'],
              style: TextStyle(color: Tools.fromHex(widget.info['color'])),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ),
          ),
          onClick: () {
            Tools.jumpPage(item);
          },
        );
      case '1': //图片导航
      default:
        return BaseInteractive(
          childWidget: SizedBox(
            width: getItemWidth(),
            child: Column(
              children: [
                BaseImage(
                  url: item['image_url'],
                  width: getItemWidth(),
                  height: getItemWidth() / Tools.getImgScale(widget.info['sub_entry']),
                ),
                Container(
                  padding: const EdgeInsets.only(top: 10, bottom: 10),
                  child: Text(
                    item['title'],
                    style: TextStyle(color: Tools.fromHex(widget.info['color']), fontSize: 12),
                    maxLines: 1,
                    overflow: TextOverflow.ellipsis,
                  ),
                )
              ],
            ),
          ),
          onClick: () {
            Tools.jumpPage(item);
          },
        );
    }
  }

  ///获取导航数组长度
  int getNavLength() {
    return (widget.info['sub_entry'] as List).length;
  }

  ///获取导航可用宽度
  double getUseWidth() {
    switch (widget.info['show_method']) {
      case '2': //文字导航
        return 375.w - getNavLength() + 1;
      case '1': //图片导航
      default:
        return 375.w;
    }
  }

  ///获取导航item宽度
  double getItemWidth() {
    switch (widget.info['slide_setting']) {
      case '1': //横向滚动
        // return getUseWidth() / widget.info['count'];
        return (getUseWidth() - 20) / 5;
      case '0': //固定
      default:
        return getUseWidth() / getNavLength();
    }
  }

  ///获取导航高度
}
